<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
{strip}
<link rel="stylesheet" type="text/css" href="{$siteroot}/templates/default/style/map.css">
<script src="http://maps.google.com/maps?file=api&amp;v=3&amp;key=AIzaSyBTe7iWW26TVJXZD62Lj1QFFuFCuN1P4Og" type="text/javascript"></script>
{/strip}
{literal}
<script type="text/javascript">
//<![CDATA[

_mSvgEnabled = true ;
_mSvgForced  = true ;

var center ;
var circle ;
var radius ;
var marker = [] ;
var poly = [] ;
var line ;
var geocoder ;
var icon ;
var gicon ;
var map ;

function load()
{
 map = new GMap2(document.getElementById("map"));
 var start = new GLatLng(35.127771,-89.967041);
 map.setCenter(start, 3);

 map.addControl(new GLargeMapControl());
 map.addControl(new GMapTypeControl());
 map.addControl(new GScaleControl()) ;
 map.addControl(new GOverviewMapControl()) ;
 geocoder = new GClientGeocoder() ;
 icon = new GIcon();
 icon.image = "http://maps.huge.info/images/mm_20_red.png";
 icon.shadow = "http://maps.huge.info/images/mm_20_shadow.png";
 icon.iconSize = new GSize(12, 20);
 icon.shadowSize = new GSize(22, 20);
 icon.iconAnchor = new GPoint(6, 20);

 gicon = new GIcon(icon);
 gicon.image = "http://maps.huge.info/images/mm_20_green.png";
 gicon.iconAnchor = new GPoint(-20, 20);
}

// Draw...

function draw()
{
 var bounds ;

 var html = '' ;
 poly = [] ; 

 for(var i = 0 ; i < marker.length ;i++)
 {
  poly.push(marker[i].getPoint()) ;
  html += marker[i].getPoint().toUrlValue() + "<br>\n" ;
 }
 if(line)
 {
  map.removeOverlay(line) ;
 }

 poly.push(marker[0].getPoint()) ;

 html += marker[0].getPoint().toUrlValue() + "<br>\n" ;

 line = new GPolyline(poly,'#FF0000', 3, 1) ;
 map.addOverlay(line) ;

 html = "Polygon Coordinates:<br>\n" + html + "<br>" ;

 document.getElementById("sidebar").innerHTML = html ;
 return ( poly )
}

// Draw a circle...

function drawCircle( )
{
 for(var n = 0 ; n < marker.length ; n++)
 {
  map.removeOverlay( marker[n] ) ;
 }
 
 marker = [] ;
 var points = [] ;
 var point = center.getPoint() ;
 var lat = point.lat() ;
 var lng = point.lng() ;
 if ( center.oldpoint )                 // Move radius when center is moved
 {
  var p = radius.getPoint() ;
  var x = point.lat() - center.oldpoint.lat() ;
  var y = point.lng() - center.oldpoint.lng() ;
  radius.setPoint( new GLatLng( p.lat() + x, p.lng() + y) ) ;
 }
 center.oldpoint = point ;

 var Cradius = point.distanceFrom(radius.getPoint()) * 0.000621371192 ;
 document.addr.radius.value = Math.round(Cradius * 100)/100 ;
 var b = radius.getPoint() ;

 var meters = distance(point.lat(),point.lng(),b.lat(),b.lng()) ;

 var Ccolor = '#0000ff' ;               // color blue
 var Cwidth = 3 ;                       // width pixels
 var d2r = Math.PI/180 ;                
 var r2d = 180/Math.PI ;                
 var Clat = (Cradius/3963) * r2d ;      

 var Clng = Clat/Math.cos(lat*d2r);
 var Cpoints = [] ;

 var list = '' ;
 for (var i = 0 ; i < 13 ; i++)
 {
  var theta = Math.PI * (i/6) ;
  Cx = lng + (Clng * Math.cos(theta)) ;
  Cy = lat + (Clat * Math.sin(theta)) ;
  Cpoints.push(new GLatLng(Cy,Cx)) ;

  points.push(new GLatLng(Cy,Cx)) ;
 }
 
 for(var n = 0 ; n < (points.length -1) ; n++)
 {
  marker[n] = new GMarker(points[n], {icon:icon, draggable: true, title: n});
  map.addOverlay(marker[n]);
  marker[n].enableDragging();
  GEvent.addListener(marker[n],'dragend',function() {draw()});
 }

 var poly = draw() ;

 map.setCenter(center.getPoint(), map.getBoundsZoomLevel(getMBR( poly ))) ;

 document.getElementById("distance").innerHTML = "Radius Information<br>Miles:" + Math.round(Cradius * 100)/100 + "<br>Meters: " + Math.round(meters) + "<br>Center: " + Math.round(point.lat()*10000)/10000 + "," + Math.round(point.lng()*10000)/10000 ;
} 

// Find the address using the geocoder...

function showAddress(address,miles)
{	
 geocoder.getLatLng( address, function(point)
 {
  if (!point)
  {
   alert(address + " not found")
  } else
  {
   if (center)
   {
    map.removeOverlay( center ) ;
    map.removeOverlay( radius ) ;
   }
   center = new GMarker(point, {icon:icon, draggable: true,  title: "Center"});

   center.enableDragging();
   map.addOverlay(center);
   GEvent.addListener(center,'dragend',function() {drawCircle()});

   oldpoint = center.getPoint() ;

   radius = new GMarker(getRadius(miles,center), {icon:gicon, draggable: true,  title: "Radius"});
   map.addOverlay(radius);
   radius.enableDragging();
   GEvent.addListener(radius,'dragend',function() {drawCircle()});
   drawCircle( ) ;
  }
 }) ;
}

// Calculate the distance...

function distance(lat1,lng1,lat2,lng2)
{
 var O = Math.PI/180 ;
 var b = lat1 * O ;
 var c = lat2 * O ;
 var d = b - c ;
 var e = (lng1 * O) - (lng2 * O) ;
 var f = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(d/2),2)+Math.cos(b)*Math.cos(c)*Math.pow(Math.sin(e/2),2)));
 return f*6378137
}

// Figure out the radial point...

function getRadius( miles, center )
{
 var point = center.getPoint() ;
 var lat = point.lat() ;
 var lng = point.lng() ;
 var d2r = Math.PI/180 ;  
 var r2d = 180/Math.PI ;  
 var Clat = (miles/3963) * r2d ;
 var Clng = Clat/Math.cos(lat*d2r);
 Clng = lng + (Clng * Math.cos(0)) ;
 Clat = lat + (Clat * Math.sin(0)) ;
 return(new GLatLng(Clat,Clng)) ;
} 

// Minimum Bounding Rectangle...

function getMBR (points)
{
 var minx = 0;
 var miny = 0;
 var maxx = 0;
 var maxy = 0;

 if ( points.length < 4 )
 {
  return ( GLatLngBounds(new GLatlng(minx,miny), new GLatlng(maxx,maxy)) ) ;
 }

 minx = points[0].lat() ;
 miny = points[0].lng() ;
 maxx = points[0].lat() ;
 maxy = points[0].lng() ;

 for(var i = 1; i < points.length ; i++ )
 {
  if ( points[i].lat() > maxx )
  {
   maxx = points[i].lat() ;
  }
  if ( points[i].lat() < minx )
  {
   minx = points[i].lat() ;
  }
  if ( points[i].lng() > maxy )
  {
   maxy = points[i].lng() ;
  }
  if ( points[i].lng() < miny )
  {
   miny = points[i].lng() ;
  }
 }

 return ( new GLatLngBounds(new GLatLng(maxx,miny), new GLatLng(minx,maxy)) ) ;
}

//]]>

</script>

{/literal}


<body onload="load();" onunload="GUnload()">

{literal}
<script language="javascript">
<!--
 if( window.innerHeight )
 {
  var width = 530//window.innerWidth - 300 ;
  var height = 350//window.innerHeight - 90 ; 
 } else
 {
  var width = 530;//document.documentElement.offsetWidth - 400 ;
  var height = 350;//document.documentElement.offsetHeight - 110 ; 
 }
 document.write('<td valign=top width=' + width + '><div id="map" style="width: ' + width  + 'px; height:' + height + 'px; border: thin solid black;"></div>') ;
 // -->
</script>
{/literal}

  <div id=distance style="overflow: auto; font-family:Verdana,sans-serif;"></div>
</body>
